<template>
  <div class="app-container">
    <!-- 帖子详情 -->
    <el-card class="post-detail">
      <div class="post-header">
        <h1 class="post-title">{{ postDetail.title }}</h1>
        <div class="post-meta">
          <el-avatar :size="40" :src="postDetail.userAvatar">{{ postDetail.userName?.charAt(0) }}</el-avatar>
          <div class="meta-info">
            <span class="post-author">{{ postDetail.userName }}</span>
            <span class="post-time">发表于 {{ parseTime(postDetail.createTime) }}</span>
          </div>
          <div class="post-stats">
            <span class="stat-item">
              <el-icon><View /></el-icon>
              {{ postDetail.viewCount }}
            </span>
            <span class="stat-item">
              <el-icon><ChatLineRound /></el-icon>
              {{ postDetail.replyCount }}
            </span>
            <span class="stat-item" @click="handleLike">
              <el-icon :class="{ 'is-liked': isLiked }"><Star /></el-icon>
              {{ postDetail.likeCount }}
            </span>
          </div>
        </div>
      </div>
      <div class="post-content" v-html="postDetail.content"></div>
    </el-card>

    <!-- 评论区 -->
    <el-card class="comment-section">
      <template #header>
        <div class="comment-header">
          <span>评论 ({{ postDetail.replyCount }})</span>
        </div>
      </template>

      <!-- 评论输入框 -->
      <div class="comment-input">
        <el-input
          v-model="commentContent"
          type="textarea"
          :rows="3"
          placeholder="写下你的评论..."
        />
        <div class="comment-button">
          <el-button type="primary" @click="handleComment">发表评论</el-button>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comment-list">
        <div v-for="item in commentList" :key="item.replyId" class="comment-item">
          <div class="comment-user">
            <el-avatar :size="32" :src="item.userAvatar">{{ item.userName?.charAt(0) }}</el-avatar>
            <div class="comment-info">
              <span class="comment-author">{{ item.userName }}</span>
              <span class="comment-time">{{ parseTime(item.createTime) }}</span>
            </div>
          </div>
          <div class="comment-content">{{ item.content }}</div>
          <div class="comment-actions">
            <span class="action-item" @click="handleReply(item)">回复</span>
            <span class="action-item" @click="handleLikeComment(item)">
              <el-icon :class="{ 'is-liked': item.isLiked }"><Star /></el-icon>
              {{ item.likeCount }}
            </span>
          </div>

          <!-- 回复列表 -->
          <div v-if="item.children && item.children.length > 0" class="reply-list">
            <div v-for="reply in item.children" :key="reply.replyId" class="reply-item">
              <div class="comment-user">
                <el-avatar :size="28" :src="reply.userAvatar">{{ reply.userName?.charAt(0) }}</el-avatar>
                <div class="comment-info">
                  <span class="comment-author">{{ reply.userName }}</span>
                  <span class="comment-time">{{ parseTime(reply.createTime) }}</span>
                </div>
              </div>
              <div class="comment-content">
                <span class="reply-to">@{{ reply.replyToUser }}</span>
                {{ reply.content }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getCommentList"
      />
    </el-card>

    <!-- 回复对话框 -->
    <el-dialog v-model="replyDialogVisible" title="回复评论" width="500px" append-to-body>
      <el-form>
        <el-form-item>
          <el-input
            v-model="replyContent"
            type="textarea"
            :rows="3"
            :placeholder="'回复 @' + currentReply?.userName"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="replyDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitReply">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="PostDetail">
import { getCurrentInstance, ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { View, ChatLineRound, Star } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance();
const route = useRoute();
const postId = route.params.id;

const postDetail = ref({});
const commentList = ref([]);
const total = ref(0);
const isLiked = ref(false);
const commentContent = ref('');
const replyDialogVisible = ref(false);
const replyContent = ref('');
const currentReply = ref(null);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    postId: postId
  }
});

const { queryParams } = toRefs(data);

/** 获取帖子详情 */
function getDetail() {
  // TODO: 调用后端API获取帖子详情
}

/** 获取评论列表 */
function getCommentList() {
  // TODO: 调用后端API获取评论列表
}

/** 点赞帖子 */
function handleLike() {
  isLiked.value = !isLiked.value;
  // TODO: 调用后端API更新点赞状态
}

/** 发表评论 */
function handleComment() {
  if (!commentContent.value) {
    proxy.$modal.msgError("请输入评论内容");
    return;
  }
  // TODO: 调用后端API发表评论
  commentContent.value = '';
  getCommentList();
}

/** 点赞评论 */
function handleLikeComment(comment) {
  comment.isLiked = !comment.isLiked;
  // TODO: 调用后端API更新评论点赞状态
}

/** 回复评论 */
function handleReply(comment) {
  currentReply.value = comment;
  replyDialogVisible.value = true;
}

/** 提交回复 */
function submitReply() {
  if (!replyContent.value) {
    proxy.$modal.msgError("请输入回复内容");
    return;
  }
  // TODO: 调用后端API提交回复
  replyDialogVisible.value = false;
  replyContent.value = '';
  getCommentList();
}

onMounted(() => {
  getDetail();
  getCommentList();
});
</script>

<style scoped>
.post-detail {
  margin-bottom: 20px;
}
.post-header {
  margin-bottom: 30px;
}
.post-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  font-weight: bold;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}
.meta-info {
  flex: 1;
}
.post-author {
  display: block;
  color: #409EFF;
  font-weight: bold;
}
.post-time {
  color: #999;
  font-size: 14px;
}
.post-stats {
  display: flex;
  gap: 20px;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  cursor: pointer;
}
.stat-item:hover {
  color: #409EFF;
}
.is-liked {
  color: #f56c6c;
}
.post-content {
  line-height: 1.8;
  font-size: 16px;
}
.comment-section {
  margin-bottom: 20px;
}
.comment-header {
  font-weight: bold;
}
.comment-input {
  margin-bottom: 30px;
}
.comment-button {
  margin-top: 10px;
  text-align: right;
}
.comment-list {
  margin-bottom: 20px;
}
.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.comment-info {
  flex: 1;
}
.comment-author {
  display: block;
  color: #409EFF;
  font-weight: bold;
}
.comment-time {
  color: #999;
  font-size: 12px;
}
.comment-content {
  margin-bottom: 10px;
  line-height: 1.6;
}
.comment-actions {
  display: flex;
  gap: 15px;
}
.action-item {
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.action-item:hover {
  color: #409EFF;
}
.reply-list {
  margin: 10px 0 0 42px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
}
.reply-item {
  padding: 10px 0;
}
.reply-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.reply-to {
  color: #409EFF;
  margin-right: 5px;
}
</style> 